HTML alapok.
Szükségünk lehet rá a sablonok átszerkesztésénél nem kell feltétlenül tudni,de azért nem árt ha tudunk néhány egyszerû fogást. Magamról csak annyit hogy nem vagyok sem informatikus sem számítógép guru csak egy számítástechnikát szeretõ ember,lehet hogy pont olyan mint te kedves olvasó.Nézd el nekem ha valami szakkifejezést esetleg nem jól írtam le. Hátakkor vágjunk is bele.
A HTML a HyperText Markup Language (hiperszöveg leírónyelv) rövidítése. Az a nyelv, amelynek segítségével weboldalakat lehet létrehozni. Szabványosítását egy független szervezet, a World Wide Web Consortium (W3C) végzi. A W3C az interneten elérhetõ a http://www.w3c.org címen. A nyelv jelenleg a 4.0 változatnál tart, amely 1997-ben jelent meg. Egy HTML-oldal folyamatos ASCII-szöveget tartalmaz, amelyet az oldal tartalma és a megjelenítéséhez szükséges elemek vegyesen alkotnak. Az oldal végsõ formája a böngészõben jelenik meg (alakul ki), mert az értelmezi ezeket a megjelenítést szabályozó elemeket. Ezek az elemek a tag-ek (ejtsd: “tegek”). A tag-eket tulajdonságokkal lehet ellátni, ezek az attribútumok. Formailag a tag-eket az attribútumaikkal együtt hegyes zárójelek közé < > kell írni, pl. < HR >. A tag-ek többsége két részbõl áll: egy nyitótag-bõl pl. < HTML > és egy zárótag-bõl pl. < /HTML >, amelyek között a formázandó, megjelenítendõ stb. tartalmi rész van (az, amire a tag vonatkozik, ill. amit megjelenít). A tag-eket egymásba lehet ágyazni. Helyesírás: kis- és nagybetû nem megkülönböztetett, szövegtagolás: a forráskódban található ismételt szóközöket és sortöréseket nem veszi figyelembe a böngészõ. (Csak egy szóközt fog megjeleníteni, mindegy, hogy mennyi szerepel a forrásban).
Egy HTML oldal felépítése
< HTML > .. < /HTML > meghatározza a HTML dokumentumot. Az oldal teljes egésze e tag-ben van. < HEAD > .. < /HEAD > megadja a HTML dokumentum fejrészét. A fejrészben olyan ún. metainformációk találhatók (ld. késõbb), amelyek az oldal készítõjére, formátumára, stb. vonatkoznak és nem fognak megjelenni a böngészõben. Egyetlen kivétel a < TITLE > .. < /TITLE >, ami az oldal címét adja meg és a böngészõ címsorában jelenik meg. < BODY > .. < /BODY > az oldal törzse. Az oldalon megjelenõ alkotórészeket ide kell beágyazni.
Egy alap HTML oldal elkészítése
Pl.:
< html >
< head >
< title >Az oldal címe< /title >
< /head >
< body >Ez az elsõ oldalam!< /body >
< /html >
Speciális elemek a fejrészben
DOCTYPE: pl. < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > megadja az oldal formátumát, HTML verziószámát stb. META: olyan oldalelemek, amelyek az oldal leírását, besorolását segítik, készítõjét azonosítják, stb. Nem jelennek meg a böngészõben (csak forráskód nézetben látszanak).
Formátuma:
< META NAME="név" VALUE="érték" LANG="használt nyelv megadasa" CONTENT="dok. tartalmara utal" HTTP-EQUIV="http valtozatra utal">
Példák:
Az oldal szerzõje nevét és e-mail címét így adhatja meg:
< META NAME="AUTHOR" CONTENT="szerzõ neve">
< LINK REV=”MADE” HREF=”mailto: nev@email.cím”>
Regisztrálás a keresõkben
Ha az oldalt regisztráljuk a keresõkben, a keresõk az itt megadott kulcsszavak alapján fogják indexelni az oldalt (nem érdemes 25-nél több kulcsszót megadni). Ez elviekben azt jelenti, hogyha valaki a keresõbe beírja pl. a Dreamweaver szót (és ezt mi kulcsszóként megadtuk a frissen regisztrált oldalunkon), akkor a keresõ találatainak listájában meg fog jelenni oldalunk a látogatónak. Pl.
< META name="keywords" content="Dreamweaver, HTML, CSS, JavaScript, webfejlesztés, webtervezés">
az elõzõ helyett inkább angolul ugyanezt:
< META name="keywords" content="Dreamweaver, HTML, CSS, JavaScript, webdeveloping, webdesign">
vagy másképp:
< META name="keywords" lang="hu" content=" Dreamweaver, HTML, CSS, JavaScript, webfejlesztés, webtervezés ">
< META name="keywords" lang="en" content=" Dreamweaver, HTML, CSS, JavaScript, webdeveloping, webdesign">
A keresés eredményének listájában a keresõk a kulcsszó és az oldalak elérési útjai mellett azok rövid leírását is megjelenítik. Ehhez a description metaelemmel el kell helyeznünk oldalunk leírását (néhány mondatos ismertetését) a regisztrált oldal forrásában. Pl.
< META name="description" content="Dreamweaver leírás, HTML, CSS, JavaScript segédletek, cikkek a webfejlesztés, webtervezés témákban.">
Az oldal kódolási formátumának megadása Erre a böngészõknek van szüksége, hogy a megfelelõ kódtáblát használják az oldalak dekódolásakor, megjelenítésekor. Pl.
< meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
Az iso8859-2 a magyar karakterkészlet beállítását jelenti.
Az iso8859-1 a latin1 karakterkészlet beállítását jelenti.
Az oldal tartalmának frissítése megadott idõ lejárta után, illetve automatikus átirányítás létrehozása:
< META http-equiv="Refresh" content="5, url=http://valahol.az.interneten.hu/">
(arra utasítja a böngészõt, hogy cserélje le 3 mp múlva a látott oldalt az általunk megadottra
< META http-equiv="Expires" content="Tue, 10 Apr 2001 12:00:00 GMT">
(megadhatjuk, hogy mikor veszti érvényét a dokumentum, ez most 2001 ápr. 12-ét déli 12 órát jelent, a greenwich-i idõ szerint, vagyis Magyarországon 13 órát).
Az oldal legfontosabb tulajdonságai
Az oldal megjelenítendõ tartalma a < BODY > és a < /BODY > tag-ek között szerepel. Az oldal tulajdonságai, mint pl. háttérkép vagy háttérszín, hivatkozások, bet színe, margótávolságok stb. a < BODY > attribútumai.
Margók, háttérszín, háttérkép, linkek színének megadása: < BODY TOPMARGIN=”felsõ margótávolság, csak Netscape-ben” LEFTMARGIN=”bal margótávolság, csak Netscape-ben”MARGINWIDTH=”margószélesség, csak Internet Explorerben” MARGINHEIGHT=”margómagasság, csak Internet Explorerben” BACKGROUND="háttérképfájl elérési útja és neve" BGCOLOR=”háttérszín” TEXT="betûszínkód" LINK="hivatkozások színe”ALINK="aktív linkek színe" VLINK=”látogatott linkek színe”>
pl. < body bgcolor="black" text="#CCCCCC" link="#33FF00" vlink="#33CC66" alink="#FFFFFF">
A színek megadás történhet angol nevükkel (pl. black), vagy RGB-értékükkel (pl. #000000, ami szintén a feketét jelenti). A hexadecimális értékeket megtalálhatjuk bármelyik jobb rajzolóprogramban (pl. Adobe Photoshop, Macromedia Fireworks stb.).
Szövegek formázása és tagolása
Bekezdések létrehozása: a kívánt bekezdést az oldal törzsrészében, vagyis a < BODY > után és a < /BODY > elõtt írjuk a < P > és < /P > tag-ek közé! Pl. < P > Ez itt egy egész bekezdés.< /P >
Ha függõlegesen igazítani szeretnénk a bekezdést, használjuk az ALIGN attribútumot. Pl.
< P ALIGN=”left”> Ez itt egy egész bekezdés balra igazítva.< /P >
< P ALIGN=”right”> Ez itt egy egész bekezdés jobbra igazítva.< /P >
< P ALIGN=”center”> Ez itt egy egész bekezdés középre igazítva.< /P >
< P ALIGN=”justify”> Ez itt egy egész bekezdés sorkizárt formában. Ez itt egy egész bekezdés sorkizárt formában. Ez itt egy egész bekezdés sorkizárt formában. Ez itt egy egész bekezdés sorkizárt formában. Ez itt egy egész bekezdés sorkizárt formában.< /P >
Ez utóbbi csak a 4-es HTML-ben jelent meg, ezért a meglehetõsen régi böngészõkben nem fog mûködni. Az alapértezett a balra igazítás, vagyis ha nem adjuk meg az ALIGN attribútumot, a böngészõ a szöveget balra fogja rendezni. Sortörések: mivel a HTML forráskódban a begépelt szóközök és végejelek (vagyis ha az Entert leütjük) figyelmen kívül maradnak, egy sortörést a < BR > tag segítségével helyezhetünk el az oldalon. Pl. Ez itt egy
< BR > sortörés. Ha azt szeretnénk, hogy a begépelt szöveg változatlan formában, vagyis a szóközökkel Enterekkel együtt jelenjen meg, helyezzük el a < pre > és a < /pre > tag-ek (jelentése: preformatted, vagyis elõformázott) között. Ha sordobás nélküli formázást szeretnénk, pl. hosszabb szövegekre, használjuk a < DIV > tag-et (az ALIGN attribútummal együtt is):
< DIV ALIGN=”center”> Ezt is középre igazítottuk, de nem követi sordobás. < /DIV >
Betûjellemzõk megadása
A < FONT > tag segítségével megadhatjuk a betûcsaládot (egy konkrét betûtípus használata nem szerencsés, mert nem biztos, hogy a látogató gépén is telepítve van az adott fontkészlet), betûméretet, betûszínt. Formátuma:
< FONT FACE="név" COLOR="színkód" SIZE="szám">szöveg< /FONT >
< font face="Verdana, Arial, Helvetica, sans-serif" font color="green" size=”4”>Egy kicsit nagyobb betûs szöveg, ami Verdana (vagy Arial, vagy Helvetica, vagy egyéb talnélküli) betûtípussal jelenik meg, ha az telepítve van, zöld színben.< /font >
A betûméret egy –7 és +7 közötti skálán állítható be. A böngészõk által megjelenített alapértelmezett betûméret a 3-as, a nagyobb, vagy pozítív elõjeles szám ennél nagyobb, a kisebb vagy negatív elõjeles szám pedig kisebb méretet eredményez.